<template>
  <div class="box">
    <div class="box-left">
      <div class="box-left-logo">
        <i class="el-icon-s-platform" style="color: #4c7cfa"></i
        >&nbsp;&nbsp;<span>企业管理平台</span>
      </div>
      <div class="box-left-menu">
        <!-- 菜单页面 -->
        <MyMenu></MyMenu>
      </div>
    </div>

    <div class="box-right">
      <div class="box-right-title">
        <MyHeader></MyHeader>
      </div>
      <div class="box-right-content">
        <!-- 内容头部 -->
        <div class="box-right-content-tabbar">
          <Mybreadcrumb></Mybreadcrumb>
        </div>
        <!-- 内容菜单框 -->
        <div class="box-right-content-main">
          <router-view></router-view>
        </div>
        <!-- 内容底部 -->
        <div class="box-right-content-bottom">
          企业级RBAC权限管理系统|Copyright © 2025 All Rights Reserved|v1.0.0
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from "@/components/MyHeader.vue";
import MyMenu from "@/components/MyMenu.vue";
import Mybreadcrumb from "@/components/Mybreadcrumb.vue";
export default {
  components: {
    MyHeader,
    MyMenu,
    Mybreadcrumb,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.box {
  width: 100vw;
  height: 100vh;
  display: flex;
  &-left {
    width: 240px;
    height: 100vh;
    background-color: #1e293b;
    &-logo {
      height: 60px;
      color: white;

      font-size: 20px;
      font-weight: 600;
      padding: 0 20px;
      line-height: 60px;
      i {
        font-size: 24px;
      }
    }
  }
  &-right {
    flex: 1;
    background-color: #f0f2f4;

    &-content {
      padding: 20px 20px;
      position: relative;
      margin-top: 60px;

      &-tabbar {
        // width: 100%;
        height: 40px;
        background-color: #fff;

        margin: 0 auto;
        border-radius: 10px;
        padding: 10px 16px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      }

      &-bottom {
        width: calc(100vw - 240px);
        height: 40px;
        background-color: #fff;
        z-index: 2;
        padding: 10px 16px;
        position: fixed;
        right: 0;
        bottom: 0;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      }
    }
  }
}
</style>